<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>轮播图</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script><!-- 建站通2.0需引入 jquery -->
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script><!-- 建站通2.0需引入 vue3 -->
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script><!-- 建站通2.0公共js -->
		<script type="text/javascript" src="js/madieer.js"></script>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="index-app" v-cloak>
			<header-app></header-app>
			<!-- 轮播图 -->
			<div class="ind1-a1">
				<div class="swiper-container ind111">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(item, index) in bannerList">
							<div class="ind1-a2 i100"><img :src="item.bg_img">
							</div>
							<div class="ind1-a3 i100"><img :src="item.mobileUrl">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-pagination ind112"></div>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					// 定义轮播图变量
					let bannerList = Vue.ref([])
					// 获取轮播图方法
					const getBanner = () => {
						requestData('carousel', {
							// data_type: 'list',
							page: 1,
							limit: 10,
							sort: 'sortAsc',
							category_id: '6353583416cdb1829c047d21'
						}, (res) => {
							// console.log(res)
							bannerList.value = res.data
						})
					}
					Vue.onBeforeMount(() => {
						getBanner()
					})
					// DOM挂载完毕
					Vue.onMounted(() => {
						
					})
					// 监听事件   监听bannerList
					Vue.watch(bannerList, () => {
						Vue.nextTick(() => {
							// 元素渲染完成执行swiper初始化
							super6('ind111', 'ind112', 10000, 800);    
						})
					})
					// 定义的变量 如果页面需要使用必须return出去
					return { bannerList }
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#index-app')
		</script>
	</body>
</html>
